<head>
<title>S.E.C.-Chuligan</title>
</head>
<script src="{{ STATIC_URL }}js/jquery.Jcrop.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}js/edit_hooligan.js" type="text/javascript"></script>
<link rel="stylesheet" href="{{ STATIC_URL }}css/jquery.Jcrop.css" type="text/css" />
<div class="">
   <img class="box_shadow" id="profile_img" src="/api/hools/img/{{hooligan.photoUrl}}" />
</div>
<br />
<button id="crop_run_modal" class="btn">
Przytnij
</button>

<form id="edit_form">
{% csrf_token %}
<input type="hidden" name="id" value="{{hooligan.id}}" />
	</br>
	</br>
   <div id="profile_data">
	  <p>
		<label>Imie:</label> <input type="text" name="name" value="{{hooligan.name}}" /> 
	  </p>
	  <p>
	  	<label>Nazwisko:</label> <input type="text" name="lastname"  value="{{hooligan.lastname}}" />
	  </p>
	  <p>
	  	<label> Czy zmienić zdjęcie <input type="checkbox" name="set_photo" value="1" /></label>
	  </p>
	  <p>
	  	<label>Zdjęcie: </label>
	  	<input type="file" name="photo" id="id_photo">
	  </p>
	  <button id="save_edit_button" type="button" class="btn btn-primary">Zapisz zmiany</button>
   </div>
</form>
<div id="hooligan_profile_box">
   <div id="crop_image_modal" class="modal hide fade">
	  <form id="coords" method="post" action="/hools/crop/{{hooligan.id}}">
		 <input id="x" name="x" type="hidden" />
		 <input id="y" name="y" type="hidden" />
		 <input id="width" name="width" type="hidden" />
		 <input id="height" name="height" type="hidden" />
		 <input id="hool_id" name="hool_id" type="hidden" value="{{hooligan.id}}" />
		 {% csrf_token %}
		 <div class="modal-header">
			<button class="close" data-dismiss="modal" aria-hidden="true">
			&times;
			</button>
			<h3 id="hool_modal_title">Przytnij</h3>
		 </div>
		 <div class="modal-body">
			Czy na pewno chcesz przyciąc zdjęcie?
		 </div>
		 <div class="modal-footer">
			<alert id="hool_modal_alert_area"></alert>
			<br />
			<button class="btn" data-dismiss="modal" aria-hidden="true">
			Anuluj
			</button>
			<input type="submit" value="Przytnij" class="btn btn-primary" />
		 </div>
	  </form>
   </div>
</div>